<template>
	<div class="page channel-box">
		<div class="texiao-box"></div>

		<!-- 顶部信息 -->
		<div class="titleBar-box">
			<div class="info-box">
				<img class="logo" :src="shujuData.icon" />
				<div class="name">{{shujuData.pdName}}<span v-if="shujuData.title">-{{shujuData.title}}</span></div>
				<div class="num">频道号：{{shujuData.id}}</div>
				<div class="num">
					<img class="img" src="@renderer/assets/channel/user.png" />
					{{shujuData.count}}
				</div>

				<el-icon @click="shoucang" class="xing" color="red" v-if="shujuData.isSc==1">
					<StarFilled />
				</el-icon>
				<el-icon @click="shoucang" class="xing" v-else>
					<StarFilled />
				</el-icon>

				<el-icon v-if="shujuData.userType==3||shujuData.userId == imData.userId"
					@click="getHeimingdan(),drawerType=3,drawer=true" class="xing" size="18">
					<Setting />
				</el-icon>

			</div>
		</div>

		<!-- 抽屉 -->
		<el-drawer v-model="drawer" :title="drawerText(drawerType)" :with-header="true" size="280">
			<div v-if="drawerType==1">
				<el-input v-model="sousuoValue" class="sousuo" @change="sousuoUser()" size="large"
					placeholder="请输入关键字搜索" prefix-icon="Search" />
				<div class="jiedai-sousuo">
					<div class="jiedai-li" v-for="(item,index) in sousuoList" :key="index" @click="joinUserChild(item)">
						<img class="img" :src="item.icon" />
						<div class="name">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div v-if="drawerType==2">
				<div class="jiedai-sousuo">
					<div class="jiedai-li" v-for="(item,index) in sousuoList" :key="index"
						@click="goUserInfo(item),userShow = true">
						<img class="img" :src="item.userIcon" />
						<div class="name">{{item.nickname}}</div>
					</div>
				</div>
			</div>
			<div v-if="drawerType==3">
				<div class="jiedai-sousuo">
					<div class="jiedai-li" v-for="(item,index) in heimingdanList" :key="index"
						@click="addHeimingdan(item,0)">
						<img class="img" :src="item.userIcon" />
						<div class="name">{{item.nickname}}</div>
					</div>
				</div>
			</div>
		</el-drawer>

		<!-- 左边 -->
		<div class="content-box">
			<div class="left-box">
				<!-- 左边顶部 -->
				<div class="left-top-box">
					<div class="name">
						<span>{{shujuData.userName}}</span>的房间
					</div>
					<div class="caozuo">
						<img @click="sousuoValue='',sousuoList=[],drawerType=1,drawer=true" class="img"
							src="@renderer/assets/channel/top-a1.png" />
						<img @click="activeNames=''" class="img" src="@renderer/assets/channel/top-a2.png" />
						<!-- <img class="img" src="@renderer/assets/channel/top-a3.png" /> -->
					</div>
				</div>
				<!-- 麦序列表 和 用户列表 -->
				<div class="user-list-box">
					<div class="user-li" v-for="(item,index) in moshiValue==1?shujuData.userList:shujuData.maiList"
						:key="index" @contextmenu.prevent="onRightClick(index)">
						<img class="img" :src="item.userIcon" />
						<div class="name">
							<div class="text" :style="{color:item.color}">{{item.nickname}}</div>
							<!-- <div class="zaixian"></div> -->
							<img class="biaoshi" :src="item.userType" />
						</div>

						<div v-if="index==0&&maixuShijian" class="shijian"><span
								v-if="item.isjm==1">禁麦</span>{{maixuShijian}}</div>

						<div v-if="shujuData.userType==3||shujuData.userId == imData.userId">
							<div class="caozuo-box" v-if="caozuoIndex==index&&caozuoShow">
								<div class="li" @click="goUserInfo(item),userShow = true">个人资料</div>
								<div class="li" @click="goUserInfo(item),getLiwu()">赠送礼物</div>
								<div class="li" @click="shenqingHaoyou(item)">添加好友</div>
								<div class="li" @click="addHeimingdan(item,1)">加入聊天黑名单</div>
								<div class="li" v-if="moshiValue==2&&index==0" @click="xiamai()">立即下麦</div>
								<!-- <div class="li">
									<div>音量调节{{yinliang||0}}%</div>
									<el-slider :show-tooltip="false" v-model="yinliang" />
								</div> -->
								<div class="li" @click="tichuFangjian(item)">请出房间</div>

								<div v-if="shujuData.userType==3">
									<div class="li" @click="shenfenShow=true">设置身份</div>
									<div class="li"
										@click="fenpeiList.unshift(item),fenpeiType=1,fenpeiPeiwanShow=true">
										安排陪玩</div>
									<div class="li"
										@click="fenpeiList.unshift(item),getFangjianList(),fenpeiType=1,fenpeiShow=true">
										调度用户
									</div>
									<div class="li"
										@click="sousuoValue='',pdUserList(),getFangjianList(),fenpeiType=2,fenpeiShow=true">
										批量调度用户
									</div>
								</div>

							</div>
						</div>

						<div v-else>
							<div class="caozuo-box" v-if="caozuoIndex==index&&caozuoShow">
								<div class="li" @click="goUserInfo(item),userShow = true">个人资料</div>
								<div class="li" @click="goUserInfo(item),getLiwu()">赠送礼物</div>
								<div class="li" @click="shenqingHaoyou(item)">添加好友</div>
								<div class="li" @click="tousu(item)">投诉</div>
								<!-- <div class="li">
									<div>音量调节{{yinliang||0}}%</div>
									<el-slider :show-tooltip="false" v-model="yinliang" />
								</div> -->
							</div>
						</div>

					</div>
				</div>

				<!-- 接待房间  -->
				<div class="peiwan-jiedai" v-if="shujuData.roomType==3">
					<!-- 控麦权限 房主，接待或其他  -->
					<div v-if="shujuData.userType==3||shujuData.userId == imData.userId">
						<div class="biaoti">陪玩</div>
						<div class="user-ul">
							<div class="user-li" v-for="(item,index) in shujuData.peiwanList" :key="index">
								<img class="img" :src="item.userIcon" />
								<div class="name">
									<div class="text">{{item.nickname}}</div>
								</div>
								<div @click="peiShimai(item)" class="shijian" v-if="item.issm==1">下麦</div>
								<div @click="peiShimai(item)" class="shijian red" v-else>试麦</div>
							</div>
						</div>
						<div v-if="shujuData.userType==3" class="anpai"
							@click="pdUserList(),pdpeiwanList(),fenpeiType=2,fenpeiPeiwanShow=true">
							<div>安排陪玩</div>
						</div>
						<div class="caozuo-jiedai">
							<el-select class="xuanze" v-model="moshiValue" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
							<div class="li" v-if="shujuData.isKo == 1" @click="kongmai(1)">开麦</div>
							<div class="li" v-else @click="kongmai(2)">控麦</div>
							<div class="li" @click="jingmai()">禁麦</div>
						</div>
					</div>
					<!-- 没有控麦权限 -->
					<div v-else>

						<div class="biaoti">接待</div>
						<div class="user-ul" style="height: 100px;">
							<div class="user-li" v-for="(item,index) in shujuData.jiedaiList" :key="index">
								<img class="img" :src="item.userIcon" />
								<div class="name">
									<div class="text">{{item.nickname}}</div>
								</div>
							</div>
						</div>

						<div v-if="moshiValue==2" class="caozuo-jiedai" @click="shenqingShangmai()">
							<div class="li"><img class="img" src="@renderer/assets/channel/a6.png" />
								<span v-if="shujuData.inMaixu==1">退出麦序</span>
								<span v-else>排队上麦</span>
							</div>
						</div>

					</div>
				</div>
				<!-- 订单房间 和 私人房间 -->
				<div class="peiwan-jiedai" v-else>
					<!-- 订单房间 才有此操作 -->
					<div class="mima" v-if="shujuData.roomType==2&&shujuData.pwd">
						房间密码：{{shujuData.pwd}}
					</div>
					<!-- 房主的操作 -->
					<div v-if="shujuData.userId == imData.userId">
						<div class="caozuo-jiedai">
							<el-select class="xuanze" v-model="moshiValue" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
							<!-- 私人房间 才有此操作 -->
							<el-select v-if="shujuData.roomType==1" class="xuanze" v-model="zhupingCaozuo"
								placeholder="请选择">
								<el-option v-for="item in optionsB" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</div>
					</div>
					<div v-else>
						<div v-if="moshiValue==2" class="caozuo-jiedai" @click="shenqingShangmai()">
							<div class="li"><img class="img" src="@renderer/assets/channel/a6.png" />
								<span v-if="shujuData.inMaixu==1">退出麦序</span>
								<span v-else>排队上麦</span>
							</div>
						</div>
					</div>
				</div>


				<div class="fenzu-box">
					<el-collapse v-model="activeNames" :accordion="true">
						<el-collapse-item class="top-fenzu" title="接待频道" name="1">
							<div class="fangjian-list" :style="{color:it.color}" v-for="(it,ind) in fenleiDataChild"
								:key="ind" @click="joinChild(it)">
								{{it.title}}
							</div>
						</el-collapse-item>
						<el-collapse-item title="公共房间" name="2">
							<div class="fangjian-list" :style="{color:it.color}" v-for="(it,ind) in fenleiDataChild"
								:key="ind" @click="joinChild(it)">
								{{it.title}}
							</div>
						</el-collapse-item>
						<el-collapse-item :title="item.title" :name="item.id" v-for="(item,index) in fenleiData"
							:key="index">
							<div class="fangjian-list" :style="{color:it.color}" v-for="(it,ind) in fenleiDataChild"
								:key="ind" @click="joinChild(it)">
								{{it.title}}
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>

				<div class="dibu-box">
					<div class="left-top-box">
						<div class="caozuo">
							<!-- <img class="img" src="@renderer/assets/channel/a1.png" />
							<img class="img" src="@renderer/assets/channel/a3.png" /> -->

							<div @click="goluyin(false)" v-if="luyinState" class="luyin">
								录音中<Timer></Timer><el-icon>
									<SuccessFilled />
								</el-icon></div>
							<img @click="goluyin(true)" v-else class="img" src="@renderer/assets/channel/a2.png" />
						</div>
						<div class="caozuo">
							<img v-if="shujuData.userType==3" @click="getRoomTitle(1),bianjiType=1,bianjiShow=true"
								class="img" src="@renderer/assets/channel/a8.png" />
							<img v-else @click="bianjiType=2,bianjiShow=true" class="img"
								src="@renderer/assets/channel/a8.png" />

							<img @click="sousuoList=shujuData.userList,drawerType=2,drawer=true" class="img"
								src="@renderer/assets/channel/qun.png" />
						</div>
					</div>
					<div class="user-info">
						<img class="img" :src="userData.icon" />
						<div class="text">{{userData.nickName}}</div>
					</div>
					<div class="left-top-box">
						<div class="caozuo">
							<el-popover placement="top" trigger="click" @show="goyinliang(2)">
								<template #reference>
									<img class="img" src="@renderer/assets/channel/a5.png" />
								</template>
								<div class="demonstration">扬声器音量：</div>
								<el-slider v-model="yangshengqiNum" />
							</el-popover>
							<el-popover placement="top" trigger="click" @show="goyinliang(1)">
								<template #reference>
									<img class="img" src="@renderer/assets/channel/a6.png" />
								</template>
								<div class="demonstration">麦克风音量：</div>
								<el-slider v-model="maikefengNum" />
							</el-popover>
						</div>
						<div class="fayan" v-if="fayanType==1" @click="setFayan(2)">自由发言</div>
						<div class="fayan" v-if="fayanType==2" @click="setFayan(1)">按住f2发言
							<div class="zhuangtai" v-if="fayanShow"></div>
						</div>
					</div>
				</div>

			</div>
			<div class="right-box">
				<div class="pingmu-bangdan">
					<div class="pingmu-box">
						<div v-if="zhupingCaozuo==1">
							<div class="daohang">
								<div @click="setDaohang(1)">
									<img v-if="pingmuDaohang==1" class="img" src="@renderer/assets/channel/d1.png" />
									<img v-else class="img" src="@renderer/assets/channel/d11.png" />
								</div>
								<div @click="setDaohang(2)">
									<img v-if="pingmuDaohang==2" class="img" src="@renderer/assets/channel/d2.png" />
									<img v-else class="img" src="@renderer/assets/channel/d22.png" />
								</div>
								<div @click="setDaohang(3)">
									<img v-if="pingmuDaohang==3" class="img" src="@renderer/assets/channel/d3.png" />
									<img v-else class="img" src="@renderer/assets/channel/d33.png" />
								</div>
								<div @click="setDaohang(4)">
									<img v-if="pingmuDaohang==4" class="img" src="@renderer/assets/channel/d4.png" />
									<img v-else class="img" src="@renderer/assets/channel/d44.png" />
								</div>
							</div>
							<paihang v-if="pingmuDaohang==1"></paihang>
							<qinmi v-if="pingmuDaohang==2"></qinmi>
							<lianren v-if="pingmuDaohang==3"></lianren>
							<paihang v-if="pingmuDaohang==4" :type="2"></paihang>
						</div>
						<ziyou v-if="zhupingCaozuo==2" :shujuData="shujuData.userList"></ziyou>

						<div class="screen-dom" :class="{screenBox:screenShow}" v-if="zhupingCaozuo==3">
							<div v-for="(item,index) in screenList" :key="index" @click="setScreen(item)">
								<ScreenWindowPreviewer :data="item"></ScreenWindowPreviewer>
							</div>
						</div>
						<img v-if="screenShow" @click="screenShow=!screenShow" class="quanping"
							src="@renderer/assets/channel/quanping2.png" />

						<div v-if="zhupingCaozuo==3">
							<div class="screen-caozuo"
								v-if="screenList.length<=0&&shujuData.isgx==0&&shujuData.userId == imData.userId">
								<div class="li" @click="getScreenList()">共享屏幕</div>
							</div>
							<div class="screen-caozuob" v-if="shujuData.isgx==1">
								<div v-if="shujuData.userId == imData.userId" class="li" @click="closeScreen()">
									结束当前共享</div>
								<img @click="goUserInfo(shujuData),getLiwu()" class="img"
									src="@renderer/assets/channel/liwu.png" />
								<img @click="screenShow=!screenShow" class="imgb"
									src="@renderer/assets/channel/quanping.png" />
							</div>
						</div>

					</div>
					<div class="bangdan-box">
						<div class="bangdan-tab">
							<div :class="{li:paihangIndex===1}" @click="paihangIndex=1,setDaohang(pingmuDaohang)">日排行
							</div>
							<div :class="{li:paihangIndex===2}" @click="paihangIndex=2,setDaohang(pingmuDaohang)">周排行
							</div>
							<div :class="{li:paihangIndex===3}" @click="paihangIndex=3,setDaohang(pingmuDaohang)">月排行
							</div>
						</div>
						<div class="bangdan-ul">
							<div class="li" v-for="(item,index) in pingmuList" :key="index">
								<img class="img" :src="item.icon" />
								<div class="text">{{item.nickname}}</div>
								<div class="num" v-if="pingmuDaohang==1">{{item.haoqi}}</div>
								<div class="num" v-if="pingmuDaohang==2">{{item.qinmi}}</div>
								<div class="num" v-if="pingmuDaohang==3">{{item.tianmi}}</div>
								<div class="num" v-if="pingmuDaohang==4">{{item.qinmi}}</div>
							</div>
						</div>
					</div>
				</div>

				<im :shujuData="shujuData" @goFang="jinFangjian"
					v-if="shujuData.roomType==2&&shujuData.userId == imData.userId||shujuData.userType==1"></im>

				<TUIKit v-if="conversation" class="im-conversation" :SDKAppID="1600048787" :userID="imData.userId"
					:userSig='imData.userSign' :conversationID="conversation">
					<TUIChat>
						<h1>欢迎使用东东电竞IM</h1>
					</TUIChat>
					<div class="caozuo-im-anniu">
						<img class="img" src="@renderer/assets/im/z1.png" />
						<img class="img" src="@renderer/assets/im/z2.png" />
						<img class="img" src="@renderer/assets/im/z3.png" />
						<img class="img" src="@renderer/assets/im/shaizi.png" />
					</div>
				</TUIKit>

			</div>
		</div>

		<el-dialog v-model="userShow" close-icon="CircleClose" width="600">
			<div class="liwu-box peiwan-info-channel">
				<div class="title-box">
					<img class="img" src="@renderer/assets/home/logo.png" />
					<div class="text">个人资料</div>
				</div>
				<div class="user-box">
					<img class="img" :src="userShuju.icon" />
					<div class="text">
						<div class="a">{{userShuju.nickname}}</div>
						<div class="b">{{userShuju.sign}}</div>
					</div>
					<div class="zuanshi" v-if="userShuju.userType==2">{{userShuju.price}}钻石/小时</div>
				</div>
				<div class="content-text">
					<div class="name">个人简介</div>
					<div class="text">
						{{userShuju.info}}
					</div>
				</div>

				<div v-if="userShuju.userType==2">
					<div class="yuxun">预存时长：{{userShuju.yyc||0}}</div>
					<div class="pinglun-box">
						<div class="li" v-for="(item,index) in userShuju.commList" :key="index">
							<img class="img" :src="item.icon" />
							<div class="content">
								<div class="text">{{item.name}}：{{item.info}}</div>
								<div class="f ai-c jc-sb">
									<div class="a">
										<el-rate v-model="item.star" clearable />
									</div>
									<div class="b">
										{{item.createDate}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</el-dialog>

		<el-dialog v-model="liwuShow" close-icon="CircleClose" width="600">
			<div class="liwu-box">
				<div class="title-box">
					<img class="img" src="@renderer/assets/home/logo.png" />
					<div class="text">送礼物</div>
				</div>
				<div class="user-box">
					<img class="img" :src="userShuju.icon" />
					<div class="text">
						<div class="a">{{userShuju.nickname}}</div>
						<div class="b">{{userShuju.sign}}</div>
					</div>
					<div class="zuanshi">{{userShuju.price}}钻石/小时</div>
				</div>
				<div class="content-text">
					<div class="name">个人简介</div>
					<div class="text">
						{{userShuju.info}}
					</div>
				</div>
				<div class="list-ul">
					<div class="ul">
						<div class="li" v-for="(item,index) in giftList" :key="index" :class="{lib:liwuIndex==index}"
							@click="liwuIndex=index">
							<img class="img" :src="item.icon" />
							<div class="name">{{item.title}}</div>
							<div class="num">
								<img class="zuanshi" src="@renderer/assets/home/zuanshi.png" />
								<div class="text">{{item.zuanshi}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="zongjia">
					<div class="chid">
						<div class="num">
							<el-icon @click="Number(liwuNum)>1?liwuNum--:liwuNum">
								<Remove />
							</el-icon>
							<span>{{liwuNum}}</span>
							<el-icon @click="liwuNum++">
								<CirclePlus />
							</el-icon>
						</div>
						<div class="button" @click="addLiwu()">立即赠送</div>
					</div>
				</div>
			</div>
		</el-dialog>


		<el-dialog v-model="bianjiShow" close-icon="CircleClose" width="600">
			<div class="bianji-pindao-box">
				<div class="title-box">
					<img class="img" src="@renderer/assets/home/logo.png" />
					<div class="text">创建语音房间</div>
				</div>
				<div class="bianji-pindao-form">
					<el-form :model="form" label-width="auto">

						<el-form-item label="房间类型：" v-if="bianjiType==1">
							<el-select size="large" v-model="form.type" class="input" placeholder="请选择">
								<el-option v-for="item in optionsC" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>

						<el-form-item label="房间名称：" v-if="bianjiType==1">
							<el-input disabled size="large" class="input" v-model="form.title" />
						</el-form-item>
						<el-form-item label="房间名称：" v-if="bianjiType==2">
							<el-input size="large" class="input" v-model="form.title" />
						</el-form-item>

						<el-form-item label="颜色:" v-if="bianjiType==2">
							<el-color-picker v-model="form.color" />
						</el-form-item>

						<el-form-item label="语音模式：">
							<el-select size="large" v-model="form.maiType" class="input" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>

						<div v-if="bianjiType==2">
							<el-form-item label="房间分类：">
								<el-select size="large" v-model="form.cateId" class="input" placeholder="请选择">
									<el-option v-for="item in fenleiData" :key="item.id" :label="item.title"
										:value="item.id" />
								</el-select>
							</el-form-item>
							<el-form-item label="房间密码：">
								<el-input size="large" class="input" v-model="form.name" />
							</el-form-item>
							<div style="color: #FC0036;">
								<el-icon>
									<Warning />
								</el-icon>
								您在当前频道还可以创建{{fangjianNum||0}}个房间
							</div>
						</div>

					</el-form>
					<div class="anniu-box">
						<div class="anniu" @click="bianjiShow=false">取消</div>
						<div class="anniub" @click="chuangjianFangjian()">完成</div>
					</div>
				</div>
			</div>
		</el-dialog>


		<el-dialog v-model="fenpeiPeiwanShow" close-icon="CircleClose" width="900">
			<div class="fenpei-peiwan-box">
				<div class="title-box">
					<img class="img" src="@renderer/assets/home/logo.png" />
					<div class="text">安排陪玩</div>
				</div>
				<div class="f ai-fs jc-sa">
					<div class="yonghu-xinxi" v-if="fenpeiType==1">
						<img class="img" :src="fenpeiList[0].userIcon" />
						<div class="name">{{fenpeiList[0].nickname}}</div>
					</div>
					<div class="list-li" v-if="fenpeiType==2">
						<div class="title">
							选择用户
						</div>
						<div class="yonghu yonghub">
							<el-input v-model="sousuoValue" class="sousuo" size="large" placeholder="搜索"
								@change="pdUserList()" prefix-icon="Search" />
							<div class="user-shuju" style="height: 330px;">
								<div class="li" v-for="(item,index) in fenpeiList" :key="index"
									@click="fenpeiPeiwanIndex=index">
									<img class="img" :src="item.userIcon" />
									<div class="text">{{item.nickname}}</div>
									<img v-if="fenpeiPeiwanIndex==index" class="region"
										src="@renderer/assets/channel/region2.png" />
								</div>
							</div>
						</div>
					</div>
					<div class="list-li">
						<div class="title">
							选择陪玩
						</div>
						<div class="yonghu yonghua">
							<el-input v-model="fenpeiPeiwanValue" class="sousuo" size="large" placeholder="搜索"
								@change="pdpeiwanList()" prefix-icon="Search" />
							<div class="user-shuju" style="height: 330px;">
								<div class="li" v-for="(item,index) in fenpeiPeiwanList" :key="index">
									<img class="img" :src="item.userIcon" />
									<div class="text">{{item.nickname}}</div>
									<img @click="fenpeiPeiwanList[index].xuanze=false" v-if="item.xuanze" class="region"
										src="@renderer/assets/channel/region2.png" />
									<img @click="fenpeiPeiwanList[index].xuanze=true" v-else class="region"
										src="@renderer/assets/channel/region.png" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="anniu-box">
					<div class="anniub" @click="setAnpai()">
						确认
					</div>
				</div>
			</div>
		</el-dialog>


		<el-dialog v-model="fenpeiShow" close-icon="CircleClose" width="900">
			<div class="fenpei-peiwan-box">
				<div class="title-box">
					<img class="img" src="@renderer/assets/home/logo.png" />
					<div class="text">调度用户</div>
				</div>
				<div class="f ai-fs jc-sa">
					<div class="yonghu-xinxi" v-if="fenpeiType==1">
						<img class="img" :src="fenpeiList[0].userIcon" />
						<div class="name">{{fenpeiList[0].nickname}}</div>
					</div>
					<div class="list-li" v-if="fenpeiType==2">
						<div class="title">选择用户</div>
						<div class="yonghu yonghub">
							<el-input v-model="sousuoValue" class="sousuo" size="large" placeholder="搜索"
								@change="pdUserList()" prefix-icon="Search" />
							<div class="user-shuju" style="height: 330px;">
								<div class="li" v-for="(item,index) in fenpeiList" :key="index">
									<img class="img" :src="item.userIcon" />
									<div class="text">{{item.nickname}}</div>
									<img @click="fenpeiList[index].xuanze=false" v-if="item.xuanze" class="region"
										src="@renderer/assets/channel/region2.png" />
									<img @click="fenpeiList[index].xuanze=true" v-else class="region"
										src="@renderer/assets/channel/region.png" />
								</div>
							</div>
						</div>
					</div>
					<div class="list-li">
						<div class="title">选择房间</div>
						<div class="yonghu yonghua">
							<el-input v-model="fangjianValue" class="sousuo" size="large" placeholder="搜索"
								@change="getFangjianList()" prefix-icon="Search" />
							<div class="user-shuju" style="height: 330px;">
								<div class="li" v-for="(item,index) in fangjianList" :key="index"
									@click="fangjianIndex=index">
									<!-- <img class="img" src="@renderer/assets/img.png" /> -->
									<div class="text">{{item.title}}</div>
									<img v-if="fangjianIndex==index" class="region"
										src="@renderer/assets/channel/region2.png" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="anniu-box">
					<div class="anniub" @click="setDiaodu()">
						确认
					</div>
				</div>
			</div>
		</el-dialog>


		<el-dialog v-model="shenfenShow" close-icon="CircleClose" width="600">
			<div class="shenfen-pindao-box">
				<div class="title-box">
					<img class="img" src="@renderer/assets/home/logo.png" />
					<div class="text">设置身份</div>
				</div>
				<div class="user-info">
					<img class="img" src="@renderer/assets/img.png" />
					<div class="text">昵称</div>
				</div>
				<el-form :model="form" label-width="auto">
					<el-form-item label="用户频道身份：">
						<el-select size="large" v-model="form.region" class="input" placeholder="请选择">
							<el-option v-for="item in 10" :key="item" :label="item" :value="item" />
						</el-select>
					</el-form-item>
				</el-form>
				<div class="biaoti">
					对应身份权限
				</div>
				<div class="shenfen-ul">
					<div class="li">
						<img class="img" src="@renderer/assets/channel/region.png" />
						<div class="text">查看个人资料</div>
					</div>
					<div class="li">
						<img class="img" src="@renderer/assets/channel/region.png" />
						<div class="text">查看个人资料</div>
					</div>
				</div>
				<div class="anniu-box">
					<div class="anniu">取消</div>
					<div class="anniub">确认</div>
				</div>
			</div>
		</el-dialog>

		<tousu ref="tousudiv" :type='1' :name="tousuData.nickname" :tousuid="tousuData.userId"></tousu>

	</div>
</template>

<script>
	import {
		yyEva
	} from 'yyeva'
	import {
		toRaw
	} from 'vue';

	var that
	// im相关
	import {
		TUIKit,
		TUIChat
	} from '../../TUIKit';
	import {
		TUIGroupService
	} from '@tencentcloud/chat-uikit-engine';
	import {
		TUILogin
	} from '@tencentcloud/tui-core';

	// 音视频
	import TRTCCloud, {
		TRTCParams,
		TRTCAppScene,
		TRTCAudioQuality,
		// 下面分享屏幕需要
		Rect,
		TRTCScreenCaptureProperty,
		TRTCVideoStreamType,
		TRTCVideoEncParam,
		TRTCVideoResolution,
		TRTCVideoResolutionMode,

		TRTCAudioRecordingParams
	} from 'trtc-electron-sdk';
	const rtcCloud = new TRTCCloud();
	const param = new TRTCParams();
	const audioRecordingParams = new TRTCAudioRecordingParams();


	import qinmi from "./qinmi.vue"
	import paihang from "./paihang.vue"
	import lianren from "./lianren.vue"
	import im from "./im.vue"
	import ziyou from "./ziyou.vue"
	import tousu from "@renderer/components/tousu.vue"
	import ScreenWindowPreviewer from "./ScreenWindowPreviewer.vue"
	import Timer from './Timer.vue';

	export default {
		components: {
			TUIKit,
			TUIChat,
			qinmi,
			paihang,
			lianren,
			im,
			ziyou,
			tousu,
			ScreenWindowPreviewer,
			Timer
		},
		data() {
			return {
				params: {}, //房间id
				imData: {}, //im信息
				conversation: '', //群id

				shujuData: {}, //房间信息
				fenleiData: [],
				fenleiDataChild: [],
				//当前折叠的分类
				activeNames: "",

				//右侧抽屉
				drawer: false,
				drawerType: 1, //抽屉类型
				sousuoValue: '', //抽屉搜索
				sousuoList: [], //搜索列表

				userData: {}, //用户信息
				fangjianNum: 0,
				onMessageReceived: null, //im群消息监听

				//麦序
				intervalId: '', //定时器
				maixuShijian: '', //麦序时间

				options: [{
						value: '2',
						label: '麦序模式',
					},
					{
						value: '1',
						label: '自由模式',
					}
				],
				moshiValue: '1',

				optionsB: [{
						value: 1,
						label: '排行榜',
					},
					{
						value: 2,
						label: '用户列表',
					},
					{
						value: 3,
						label: '屏幕分享',
					}
				],
				zhupingCaozuo: 1, //主屏显示
				screenList: [], //屏幕列表
				screenShow: false, //屏幕全屏

				paihangIndex: 1, //周，月
				pingmuDaohang: 1, //排行类型
				pingmuList: [], //数据

				caozuoShow: false, //右击操作
				caozuoIndex: 0, //数组索引
				yinliang: 0,


				userShow: false, //查看信息
				userShuju: {},

				liwuShow: false, //礼物
				giftList: [],
				liwuIndex: 0,
				liwuNum: 1,

				tousuData: {}, //投诉人
				heimingdanList: [], //黑名单

				bianjiShow: false, //创建语音房间
				bianjiType: 1,
				optionsC: [{
						value: 1,
						label: '公共房间',
					},
					{
						value: 2,
						label: '接待房间',
					}
				],
				form: {
					pdId: "", //频道id
					cateId: "", //分类id
					title: "", //标题
					type: 1, //1：公共房间 2：接待房间
					maiType: '1', //语音模式 1：自由麦 2：麦序
					color: "", //色号
					pwd: "" //密码
				},

				//用户
				fenpeiShow: false,
				fenpeiType: 1,
				fenpeiList: [],

				//房间
				fangjianValue: "",
				fangjianIndex: 0,
				fangjianList: [],

				//陪玩
				fenpeiPeiwanShow: false,
				fenpeiPeiwanValue: "",
				fenpeiPeiwanIndex: 0,
				fenpeiPeiwanList: [],

				shenfenShow: false, //身份
				luyinState: false, //是否录音

				maikefengNum: 0,
				yangshengqiNum: 0,

				fayanType: 1, //发言模式
				fayanShow: false
			};
		},
		watch: {
			activeNames(newValue) {
				if (newValue) this.getFenleiDataChild(newValue)
			},
			'form.type': function(newValue) {
				if (newValue) this.getRoomTitle(newValue)
			},
			moshiValue(newValue) {
				if (newValue) this.editRoom(newValue)
			},
			zhupingCaozuo(newValue, oval) {
				if (oval == 3) this.closeScreen()
			},
			'params.id': function(newValue) {
				if (this.luyinState) {
					this.luyinState = false
					this.goluyin(false)
				}
			},
			maikefengNum(newValue) {
				console.log('设置麦克风参数', newValue)
				rtcCloud.setCurrentMicDeviceVolume(newValue)
			},
			yangshengqiNum(newValue) {
				console.log('设置扬声器参数', newValue)
				rtcCloud.setCurrentSpeakerVolume(newValue)
			}
		},
		mounted() {
			that = this
			// 添加事件监听
			window.addEventListener('click', this.onRightClick);
			window.onbeforeunload = (e) => {
				console.log('关闭窗口')
				rtcCloud.exitRoom();
				TUIGroupService.quitGroup(this.params.id)
				// e.returnValue = false
			}

			window.addEventListener('keydown', (event) => {
				if (event.key == 'F2' && this.fayanType == 2) {
					rtcCloud.setAudioCaptureVolume(100)
					this.fayanShow = true
				}
			});
			window.addEventListener('keyup', (event) => {
				if (event.key == 'F2' && this.fayanType == 2) {
					rtcCloud.setAudioCaptureVolume(0)
					this.fayanShow = false
				}
			});

			//初始化im信息，以及直播群id，音视频和群是一个id
			this.imData = JSON.parse(localStorage.getItem("imLogin"))
			this.params = this.$_getUrlParameters();
			this.setDaohang(1) //导航
			this.getUser() //个人信息

			const loading = ElLoading.service({
				text: '加载中',
				background: 'rgba(0, 0, 0, 0.7)',
			})
			setTimeout(() => {
				this.joinZhiboQun() //进房间
				this.getIM() //im消息监听
				loading.close()
			}, 2000)
		},
		beforeDestroy() {
			// 移除事件监听
			window.removeEventListener('click', this.onRightClick);
		},
		methods: {
			setMuteAudio(userid, type) {
				if (userid == this.imData.userId) {
					rtcCloud.muteLocalAudio(type);
				} else {
					rtcCloud.muteRemoteAudio(userid, type);
				}
			},
			//获取房间标题
			getRoomTitle(type) {
				this.$api_getRoomTitle({
					type
				}).then(res => {
					this.form.title = res.title
				})
			},
			//获取个人信息
			getUser() {
				this.$api_userInfo().then(res => {
					this.userData = res.data
				})
			},
			addTimes() {
				this.$api_addTimes({
					pdId: this.shujuData.pdId
				}).then(res => {
					this.fangjianNum = res.count
				})
			},
			jinFangjian(id) {
				rtcCloud.exitRoom();
				TUIGroupService.quitGroup(this.params.id)
				this.params.id = id
				this.joinZhiboQun()
			},
			async bofang(url) {
				let player = await yyEva({
					container: document.querySelector('.texiao-box'), // Html Element
					videoUrl: url, // Video Url
					alphaDirection: 'left',
					loop: false,
					videoID: url
				})
				player.start() // start player
			},
			//im监听
			getIM() {
				if (this.onMessageReceived) TUILogin.chat.off(TUILogin.EVENT.MESSAGE_RECEIVED, this.onMessageReceived)
				this.onMessageReceived = (event) => {
					const message = event.data[0];
					console.log('监听消息', message)

					if (message.type === TUILogin.TYPES.MSG_CUSTOM) {
						var res = JSON.parse(message.payload.data)
						console.log('您有一条新消息[自定义]', res)

						if (res.type == '1001') {
							if (res.data.texiao) this.bofang(res.data.texiao)
						} else if (res.type == '1002') {
							this.shujuData.count = res.data.count
							this.shujuData.jiedaiList = res.data.jiedaiList
							this.shujuData.peiwanList = res.data.peiwanList
						} else if (res.type == '1003') {
							this.shujuData.maiList = res.data.maiList
							if (!this.intervalId) this.setTime()
						} else if (res.type == '1008') {
							if (res.data.userId == this.imData.userId) {
								this.setMuteAudio(this.imData.userId, false);
								if (!this.intervalId) this.setTime()
							}
						} else if (res.type == '1009') {
							this.jinFangjian(res.data.roomId)
						} else if (res.type == '1010') {
							if (res.data.type == 1) {
								clearInterval(this.intervalId)
								if (this.shujuData.maiList[0] && this.shujuData.maiList[0].userId == this.imData
									.userId) {
									this.setMuteAudio(this.imData.userId, true);
								}
							} else {
								if (!this.intervalId) this.setTime()
							}
						} else if (res.type == '1011') {
							this.moshiValue = res.data.maiType
							this.getData()
						} else if (res.type == '1012') {
							if (res.data.userId == this.imData.userId) {
								if (res.data.type == 1) {
									this.setMuteAudio(this.imData.userId, false);
								} else {
									this.setMuteAudio(this.imData.userId, true);
								}
							}
						} else if (res.type == '1014') {
							if (this.shujuData.id == res.data.roomId) {
								this.shujuData.orderState = res.data.state
								this.shujuData.orderId = res.data.orderId
							}
						} else if (res.type == '1015') {
							if (this.shujuData.id == res.data.roomId) {
								if (res.data.userId) {
									if (res.data.userId == this.imData.userId) {
										this.closeFangjian('您已被踢出房间')
									}
								} else {
									this.closeFangjian('订单已结束，即将退出房间')
								}
							}
						} else if (res.type == '1016') {
							//1：开始推流  0：关闭推流
							if (res.data.type == 1) {
								this.zhupingCaozuo = 3
								this.shujuData.isgx = 1
								this.getScreen()
							} else {
								this.zhupingCaozuo = 1
								this.shujuData.isgx = 0
							}
						}


					}
				};
				TUILogin.chat.on(TUILogin.EVENT.MESSAGE_RECEIVED, this.onMessageReceived);
			},
			closeFangjian(text) {
				ElMessageBox.alert(text, '提示', {
					showConfirmButton: false
				})
				setTimeout(() => {
					window.api.BrowserWindow('close')
				}, 2000)
			},
			//进入直播群
			joinZhiboQun() {
				this.conversation = ''
				let groupService = TUIGroupService.joinGroup({
					groupID: this.params.id
				});
				groupService.then((res) => {
					console.log('加入im直播群', res)
					this.conversation = 'GROUP' + this.params.id
				});
				this.addRtcCloud()
			},
			//进入音视频房间
			addRtcCloud() {
				param.sdkAppId = 1600048787;
				param.userId = this.imData.userId;
				param.userSig = this.imData.userSign;
				param.roomId = Number(this.params.id);
				param.strRoomId = JSON.stringify(this.params.id)
				rtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneAudioCall);
				console.log('进房间参数', param)

				function onEnterRoom(result) {
					if (result > 0) {
						console.log('成功进入房间', result);
					} else {
						console.log('进入房间失败', result);
					}
				}
				rtcCloud.on('onEnterRoom', onEnterRoom);
				rtcCloud.startLocalAudio(TRTCAudioQuality.TRTCAudioQualitySpeech);
				// rtcCloud.startLocalAudio(TRTCAudioQuality.TRTCAudioQualityMusic);

				this.fayanType = 1 //发言模式 
				rtcCloud.setAudioCaptureVolume(100) //发言音量

				this.getData()
			},
			//点击事件
			onRightClick(index) {
				// console.log(index)
				this.caozuoIndex = index
				this.caozuoShow = !this.caozuoShow
			},
			//房间数据
			getData() {
				this.$api_roomDetail({
					roomId: this.params.id
				}).then(res => {
					this.shujuData = res.data
					this.moshiValue = res.data.maiType
					//黑名单退出房间
					if (res.data.isLh == 1) this.closeFangjian('您被加入黑名单')
					// 麦序模式
					if (res.data.maiType == 2) {
						if (this.shujuData.userType == 3 || (this.shujuData.maiList[0] && this.shujuData.maiList[0]
								.userId == this.imData.userId)) {
							this.setMuteAudio(this.imData.userId, false);
						} else {
							this.setMuteAudio(this.imData.userId, true);
						}
						if (res.data.isKo != 1) {
							if (!this.intervalId) this.setTime()
						}
					}
					//是否分享屏幕
					if (this.shujuData.isgx == 1) {
						this.getScreen()
					} else {
						this.zhupingCaozuo = 1
					}
					this.getInit()
					this.addTimes()
				})
			},
			//房间数据-刷新数据
			getDataB() {
				this.$api_roomDetail({
					roomId: this.params.id
				}).then(res => {
					this.shujuData = res.data
				})
			},
			//分类数据
			getInit() {
				this.$api_pdRoomCateList({
					pdId: this.shujuData.pdId
				}).then(res => {
					this.fenleiData = res.dataList
				})
			},
			//定时器
			setTime() {
				var shijianMaixu = this.shujuData.maiList[0].time
				if (shijianMaixu) {
					this.intervalId = setInterval(() => {
						this.maixuShijian = this.remainingTime(shijianMaixu)
					}, 1000);
				}
			},
			remainingTime(shijian) {
				var targetTime = new Date(shijian);
				var currentTime = new Date();
				const diff = targetTime - currentTime; // 目标时间与当前时间的差值（毫秒）
				if (diff <= 0) {
					if (this.shujuData.maiList.length > 0 && this.shujuData.maiList[0].userId == this.imData.userId) {
						this.setMuteAudio(this.imData.userId, true);
						this.shujuData.inMaixu = 0
					}
					return '结束'; // 走im刷新麦序列表
				} else {
					const days = Math.floor(diff / (1000 * 60 * 60 * 24));
					const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
					const secs = Math.floor((diff % (1000 * 60)) / 1000);
					if (days) return `${days}:${hours}:${mins}:${secs}`;
					if (hours) return `${hours}:${mins}:${secs}`;
					if (mins || secs) return `${mins}:${secs}`;
				}
			},
			getFenleiDataChild(id) {
				this.$api_pdRoomList({
					pdId: this.shujuData.pdId,
					cateId: id
				}).then(res => {
					this.fenleiDataChild = res.dataList
				})
			},
			shoucang() {
				var type = this.shujuData.isSc == 1 ? 0 : 1
				this.$api_pdColl({
					id: this.shujuData.pdId,
					type
				}).then(res => {
					this.shujuData.isSc = type
				})
			},
			joinUserChild(item) {
				this.joinChild({
					hasPd: item.pwd ? 1 : 0,
					pwd: item.pwd,
					id: item.roomId,
					title: item.roomTitle
				})
			},
			joinChild(item) {
				if (this.params.id == item.id) {
					this.$_tishi("你已经在该房间", 'error')
					return
				}
				if (item.hasPd == 1) {
					ElMessageBox.prompt('房间密码：', '加入' + (item.title || '房间'), {
						confirmButtonText: '完成',
						cancelButtonText: '取消',
					}).then(({
						value
					}) => {
						if (value == item.pwd) {
							rtcCloud.exitRoom();
							TUIGroupService.quitGroup(this.params.id)
							this.params.id = item.id
							this.joinZhiboQun()
						} else {
							this.$_tishi("房间密码错误", 'error')
						}
					})
				} else {
					rtcCloud.exitRoom();
					TUIGroupService.quitGroup(this.params.id)
					this.params.id = item.id
					this.joinZhiboQun()
				}
			},
			setDaohang(index) {
				this.pingmuDaohang = index
				var apiUrl = 'haoqiBang'
				if (index == 1) {
					apiUrl = 'haoqiBang'
				} else if (index == 2) {
					apiUrl = 'qinmiBang'
				} else if (index == 3) {
					apiUrl = 'lianrenBang'
				} else if (index == 4) {
					apiUrl = 'peiwanBang'
				}
				this['$api_' + apiUrl]({
					type: this.paihangIndex
				}).then(res => {
					this.pingmuList = res.dataList
				})
			},
			shenqingShangmai() {
				var apiUrl = 'paidui'
				if (this.shujuData.inMaixu == 1) apiUrl = 'xiamai'
				this['$api_' + apiUrl]({
					roomId: this.shujuData.id
				}).then(res => {
					this.$_tishi(this.shujuData.inMaixu == 1 ? '退出完成' : '申请完成', 'success');
					this.shujuData.inMaixu = (this.shujuData.inMaixu == 1 ? 0 : 1)
					// this.getData() 走im麦序变更
				})
			},
			xiamai() {
				this.$api_xiamai({
					roomId: this.shujuData.id
				}).then(res => {
					this.$_tishi('操作完成', 'success');
				})
			},
			sousuoUser() {
				this.$api_serchPdUser({
					pdId: this.shujuData.pdId,
					key: this.sousuoValue
				}).then(res => {
					this.sousuoList = res.dataList
				})
			},
			chuangjianFangjian() {
				if (this.bianjiType == 2 && this.fangjianNum < 1) {
					this.$_tishi('无创建房间次数', "error");
					return
				}
				if (!this.form.title) {
					this.$_tishi('房间名称为空', "error");
					return
				}
				if (this.bianjiType == 2) {
					if (!this.form.cateId) {
						this.$_tishi('请选择房间分类', "error");
						return
					}
					this.form.type = ''
				}

				this.form.pdId = this.shujuData.pdId
				this.$api_addRoom(this.form).then(res => {
					this.bianjiShow = false
					this.activeNames = ''
					this.$_tishi('创建完成', 'success');
					this.getInit()
					this.addTimes()
				})
			},
			editRoom(type) {
				this.$api_editRoom({
					roomId: this.shujuData.id,
					maiType: type
				}).then(res => {
					console.log(res) //im处理
					this.getDataB()
				})
			},
			peiShimai(item) {
				this.$api_peiShimai({
					roomId: this.shujuData.id,
					userId: item.userId, //陪玩用户id
					type: item.issm == 1 ? 0 : 1 //1：试麦 0：闭麦
				}).then(res => {
					console.log(res) //im处理
				})
			},
			kongmai(type) {
				this.$api_kongmai({
					roomId: this.shujuData.id,
					type
				}).then(res => {
					this.shujuData.isKo = type
					console.log(res) //im处理
				})
			},
			jingmai() {
				if (this.shujuData.maiList[0]) {
					var item = this.shujuData.maiList[0]
					this.$api_userJinmai({
						roomId: this.shujuData.id,
						userId: item.userId,
						type: item.isjm == 1 ? 0 : 1 //1：禁麦 0：开麦
					}).then(res => {
						if (item.isjm == 1) {
							this.setMuteAudio(userId, true);
							this.$_tishi('禁麦成功', 'success')
						} else {
							this.setMuteAudio(userId, false);
							this.$_tishi('开麦成功', 'success')
						}
					})
				} else {
					this.$_tishi('无麦序列表', "error");
				}
			},
			goUserInfo(item) {
				this.$api_duiUserinfo({
					did: item.userId //对方用户id
				}).then(res => {
					this.userShuju = res.data
				})
			},
			getLiwu() {
				this.$api_giftList().then(res => {
					this.giftList = res.dataList
					this.liwuShow = true
				})
			},
			addLiwu() {
				if (!this.giftList[this.liwuIndex].id) {
					this.$_tishi('请选择礼物', 'error')
					return
				}
				this.$api_sendGift({
					did: this.userShuju.userId, //对方用户id
					giftId: this.giftList[this.liwuIndex].id, //礼物id
					count: this.liwuNum //数量
				}).then(res => {
					this.liwuShow = false
					this.$_tishi('赠送成功', 'success')
					this.bofang(this.giftList[this.liwuIndex].svag)
				})
			},
			//添加好友
			shenqingHaoyou(item) {
				this.$api_addFriend({
					did: item.userId
				}).then(res => {
					this.$_tishi('已发送好友申请', 'success')
				})
			},
			//投诉
			tousu(item) {
				this.tousuData = item
				this.$refs.tousudiv.show()
			},
			//添加移除黑名单
			addHeimingdan(item, type) {
				this.$api_addPdBlack({
					pdId: this.shujuData.pdId,
					userId: item.userId, //用户id
					type //1：添加 0：移除
				}).then(res => {
					this.$_tishi('操作完成', 'success')
					if (type == 0) this.drawer = false
				})
			},
			//黑名单
			getHeimingdan() {
				this.$api_pindaoBlack({
					pdId: this.shujuData.pdId
				}).then(res => {
					this.heimingdanList = res.dataList
				})
			},
			drawerText(type) {
				if (type == 1) {
					return '搜索用户，点击进入所在房间'
				} else if (type == 2) {
					return '用户列表，点击查看个人资料'
				} else {
					return '黑名单列表，点击移除黑名单'
				}
			},
			//搜用户
			pdUserList() {
				this.$api_pdUserList({
					roomId: this.shujuData.id,
					name: this.sousuoValue,
					type: 1
				}).then(res => {
					res.dataList.map((item, index) => {
						res.dataList[index].xuanze = false
					})
					this.fenpeiList = res.dataList
				})
			},
			//搜陪玩
			pdpeiwanList() {
				this.$api_pdUserList({
					roomId: this.shujuData.id,
					name: this.fenpeiPeiwanValue,
					type: 2
				}).then(res => {
					res.dataList.map((item, index) => {
						res.dataList[index].xuanze = false
					})
					this.fenpeiPeiwanList = res.dataList
				})
			},
			//获取房间列表
			getFangjianList() {
				this.$api_pdRoomList({
					pdId: this.shujuData.pdId,
					title: this.fangjianValue
				}).then(res => {
					this.fangjianList = res.dataList
				})
			},
			//分配房间
			setDiaodu() {
				var idlist = []
				if (this.fenpeiType == 1) {
					idlist.push(this.fenpeiList[0].userId)
				} else {
					this.fenpeiList.map((item, index) => {
						if (item.xuanze) idlist.push(item.userId)
					})
				}
				if (idlist.length <= 0) {
					this.$_tishi('请选择用户', "error");
					return
				}
				if (this.fangjianList.length <= 0) {
					this.$_tishi('请选择房间', "error");
					return
				}
				this.$api_moveUser({
					pdId: this.shujuData.pdId,
					userId: idlist.join('|'), //用户id(多条竖杠隔开)
					roomId: this.fangjianList[this.fangjianIndex].id, //房间id
				}).then(res => {
					console.log(res) //im处理
					this.fenpeiShow = false
				})
			},
			//安排陪玩
			setAnpai() {
				if (this.fenpeiList.length <= 0) {
					this.$_tishi('请选择用户', "error");
					return
				}
				var idlist = []
				this.fenpeiPeiwanList.map((item, index) => {
					if (item.xuanze) idlist.push(item.userId)
				})
				if (idlist.length <= 0) {
					this.$_tishi('请选择陪玩', "error");
					return
				}
				this.$api_anpai({
					pdId: this.shujuData.pdId,
					peiIds: idlist.join('|'), //用户id(多条竖杠隔开)
					bossId: this.fenpeiType == 1 ? this.fenpeiList[0].userId : this.fenpeiList[
						this.fenpeiPeiwanIndex].userId
				}).then(res => {
					console.log(res) //im处理
					this.fenpeiPeiwanShow = false
				})
			},
			tichuFangjian(item) {
				this.$api_removeUser({
					roomId: this.shujuData.id,
					userId: item.userId, //用户id
				}).then(res => {
					this.$_tishi('操作完成', 'success')
				})
			},
			getScreenList() {
				this.screenList = toRaw(rtcCloud.getScreenCaptureSources(320, 180, 32, 32));
				console.log(this.screenList)
			},
			closeScreen() {
				if (this.shujuData.isgx == 1) {
					this.$api_gongxiang({
						roomId: this.shujuData.id,
						type: 0, //1：开始推流 0：关闭推流
					}).then(res => {
						this.screenList = []
						this.shujuData.isgx = 0
						rtcCloud.stopScreenCapture()
					})
				}
			},
			setScreen(screenData) {
				const captureRect = new Rect(0, 0, 0, 0);
				const property = new TRTCScreenCaptureProperty(
					true, true, true, 0, 0, false
				);
				if (screenData) {
					rtcCloud.selectScreenCaptureTarget(screenData, captureRect, property)
				}
				const screenshareDom = document.querySelector('.screen-dom');
				const encParam = new TRTCVideoEncParam(
					TRTCVideoResolution.TRTCVideoResolution_1920_1080,
					TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape,
					15,
					2000,
					0,
					false
				);
				this.$api_gongxiang({
					roomId: this.shujuData.id,
					type: 1, //1：开始推流 0：关闭推流
				}).then(res => {
					rtcCloud.startScreenCapture(screenshareDom, TRTCVideoStreamType.TRTCVideoStreamTypeSub,
						encParam);
					this.shujuData.isgx = 1
				})
			},
			getScreen() {
				// 拉取分享屏幕
				if (this.shujuData.userId == this.imData.userId) {
					this.zhupingCaozuo = 3
					this.shujuData.isgx = 1
					this.getScreenList()
				} else {
					const remoteDom = document.querySelector('.screen-dom');

					function onUserSubStreamAvailable(userId, available) {
						if (available === 1) {
							rtcCloud.startRemoteView(userId, remoteDom, TRTCVideoStreamType.TRTCVideoStreamTypeSub);
						} else {
							rtcCloud.stopRemoteView(userId, TRTCVideoStreamType.TRTCVideoStreamTypeSub);
						}
					}
					rtcCloud.on('onUserSubStreamAvailable', onUserSubStreamAvailable);
				}
			},
			goluyin(type) {
				this.luyinState = type
				if (type) {
					audioRecordingParams.filePath = 'C:/audio.aac'
					rtcCloud.startAudioRecording(audioRecordingParams)
				} else {
					rtcCloud.stopAudioRecording()
					ElNotification.success({
						title: '录音完成',
						message: "文件路径：C:/audio.aac",
						position: 'bottom-left',
					})
				}
			},
			goyinliang(type) {
				if (type == 1) {
					const disableAGC = {
						api: "enableAudioAGC",
						params: {
							enable: 0,
						},
					};
					rtcCloud.callExperimentalAPI(JSON.stringify(disableAGC));
					this.maikefengNum = rtcCloud.getCurrentMicDeviceVolume()
					console.log('查询麦克风参数', rtcCloud.getCurrentMicDeviceVolume())
				} else {
					this.yangshengqiNum = rtcCloud.getCurrentSpeakerVolume()
					console.log('查询扬声器参数', rtcCloud.getCurrentSpeakerVolume())
				}
			},
			setFayan(type) {
				this.fayanType = type
				if (type == 2) {
					rtcCloud.setAudioCaptureVolume(0)
				} else {
					rtcCloud.setAudioCaptureVolume(100)
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	@import "@renderer/utils/popUp.less";
	@import "./channel.less";
</style>